<template>
	<view class="container">
		<!-- 提示消息 -->
		<view class="tips-box">
			<view class="tui-rate-container">
				<text style="line-height: 40rpx;color: rgb(228, 31, 25);font-size: 28rpx;margin-left: 5rpx;">{{listData.score_all}}</text>
				<tui-rate :current="listData.score_all" :disabled="true" :size="25"></tui-rate>
			</view>
		</view>
		<view class="container-box" v-for="(item,index) in listData.list" :key="index">
			<view class="block_msg" v-if="index!=0">
			</view>
			<!-- 动态列表 -->
			<view class="dynamic">
				<view class="info">
					<view class="info-box">
						<view class="info-icon1" v-if="item && item.avatar">
							<image :src="item.avatar" class="info-img1"></image>
						</view>
						<view class="info-text">
							<view class="name" v-if="item && item.nickname">{{item.nickname}}</view>
							<view class="tui-rate-container">
								<tui-rate :current="parseInt(item.score)" :disabled="true" :size="16"></tui-rate>
							</view>
						</view>
					</view>
					<view class="time" v-if="item && item.add_time">{{item.add_time}}</view>
				</view>
				<view>
					<view class="content" v-if="item.appoint_id">
						<span v-if="item.content.length>word_length">{{intercept_word(item.content)}}</span>
						<span v-if="item.content.length<=word_length">{{item.content}}</span>
					</view>
					<!-- 九张图 -->
					<view class="img-box" v-if="item.comment_img && item.comment_img[0]" :class="(item.comment_img_num>0)?((item.comment_img_num>3)?((item.comment_img_num>6)?'img_box_9':'img_box_6'):'img_box_3'):'img_box_0'">
						<view :class="(item.comment_img_num>1)?'bigimg_more':'bigimg'" v-for="(img, img_key) in 5" @click="previewimage(img_key)">
							<image v-if="item.comment_img_num==1 && img" :src="img" mode="widthFix" class="around-img"></image>
							<image v-if="item.comment_img_num>1 && img" :src="img" mode="widthFix" class="around-img_more"></image>
						</view>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="cell"></view>
			</view>
			<!-- 点赞 -->
			<!-- 评论区 -->
		</view>


		<view class="tip" v-show="pageLoading">
			<lang keywords="加载中"></lang>
		</view>

		<view class="tip" v-show="pageLoadings">
			<view class="bottom-tips">
				<view class="tui-rate-container">
					<tui-rate :current="3" :disabled="true" :size="16"></tui-rate>
				</view>
				<lang keywords="我也是有底线的···"></lang>
			</view>
		</view>

		<!-- 发布 -->
		<!-- 弹出层评论区 -->
	</view>
</template>

<script>
	import tuiTag from "../component/tag/tag.vue"
	import tuiRate from "../component/rate/rate"
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	
	const getcate_bbs_list = () => {
		common.post('Appoint_new&a=comment_list', {
			appoint_id: _this.appoint_id,
			page: _this.pageIndex,
		}, data => {
			console.log("kkkkkkkkkkkk",data)
			if (data) {
				if (_this.pageIndex == 1) {
					_this.listData = data;
					_this.footer_link = data.footer_link;
				} else if (_this.pageIndex > 1) {
					var listData = _this.listData;
					var dataList = listData.dataList;
					if (!dataList || !dataList[0]) {
						dataList = [];
					}
					if (data.dataList && data.dataList[0]) {
						for (var i in data.dataList) {
							if (data.dataList[i]) {
								dataList.push(data.dataList[i]);
							}
						}
						console.log("===dataList===1======", dataList)
						listData.dataList = dataList;
						_this.listData = listData;
					}
				}
				if (data.dataList && parseInt(data.dataList.length) >= parseInt(_this.page_len)) {
					_this.pageLoading = true;
					_this.pageLoadings = false;
				} else {
					_this.pageLoading = false;
					_this.pageLoadings = true;
				}
			}
			if (_this.pageIndex == 1 && (!data || !data.dataList || !data.dataList[0])) {
				_this.pageLoadings = false;
				_this.no_data = true;
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		});
	};
	const setMyHouseInfo = () => {
		var res = {
			village_id: _this.village_id,
			village_name: _this.village_name,
			pigcms_id: _this.pigcms_id
		};
		uni.setStorageSync('village_key', res);
	};
	export default {
		data() {
			return {
				no_data: false,
				page_len: 10,
				scrollTop: '',
				scrollY: true,
				pageLoading: false,
				pageLoadings: false,
				cat_id: 0,
				notedata: '',
				listData: [],
				user_options: {},
				listhouseData: {},
				pageIndex: 1,
				showIcon: true,
				showNew: false,
				is_reply: false,
				aricleid: '',
				userInfo: {},
				zanlist: {},
				village_id: 0,
				pigcms_id: 0,
				village_name: '',
				village_logo: '',
				choose_options: {},
				zan_len: 6,
				popup_focus: false,
				comment_id: 0,
				nickname: '',
				data_index: 0,
				word_length: 60,
				config: '',
				mobile_head_color: '',
				property_id: 0,
				footer_link: {},
				appoint_id:'',
			};
		},
		onShow() {

			// #ifdef H5
			if (_this.village_id) {
				_this.setWxShare()
			}
			// #endif
		},
		filters: {
			ellipsis(value) {
				if (!value) return '没有内容'
				if (value.length > 8) {
					return value.slice(0, 8) + '...'
				}
				return value
			}
		},
		// 上拉加载
		onReachBottom() {
			console.log('onReachBottom', _this.pageLoading);
			if (_this.pageLoading) {
				_this.pageIndex = _this.pageIndex + 1;
				getcate_bbs_list()
			} else {
				_this.pageLoading = false;
				_this.pageLoadings = true;
			}
		},
		onLoad: function(options) {
			_this = this;
			_this.appoint_id = options.appoint_id;
			console.log("wwwwwww",_this.appoint_id)
			common.setMainColor(_this, function(config) {
				common.getTxtKey('评价').then(key => {
					uni.setNavigationBarTitle({
						title: key
					});
				}, () => {});
			});
			getcate_bbs_list();
		},
		onPullDownRefresh: function(e) {
			_this.pageIndex = 1;
			getcate_bbs_list();
		},
		components: {
			tuiRate,
			tuiTag
		},
		methods: {
			getUserInfo(e) {
				console.log('user.info', e);
				_this.user_options = {}
			},
			onShareAppMessage: function() {
				return {
					title: "【" + _this.village_name + "】邻里交流分享平台",
					desc: _this.village_name + "专属交流分享平台，快来看看身边大家分享的热门事件吧",
					path: '/pages/village/resident/resident?village_id=' + _this.village_id
				};
			},
			setWxShare() {
				let pageLink = `${common.requestDomain}packapp/${common.wxapp_type}/pages/village/resident/resident?village_id=${_this.village_id}`
				pageLink = common.addShareParam(pageLink)
				let shareWxLink = pageLink
				var shareData = {
					title: "【" + _this.village_name + "】邻里交流分享平台",
					desc: _this.village_name + "专属交流分享平台，快来看看身边大家分享的热门事件吧",
					sendFriendLink: shareWxLink,
					share_img: _this.village_logo
				}
				console.log('shareData', shareData);
				common.setWxShare(shareData)
			},
			previewimage(img_key) {
				var info = {};
				var current = 0;
				if (img_key > 0) {
					current = img_key;
				}
				if (_this.listData && _this.listData.comment_img && _this.listData.comment_img.previewimage) {
					var urls = _this.listData.comment_img.previewimage
					console.log('urls', urls)
					uni.previewImage({
						current: current,
						urls: urls,
						success: function(res) {
							console.log('success', res)
						},
						fail: function(fail) {
							console.log('fail', fail)
						}
					})
				}
			},
			intercept_word(word) {
				var len = _this.word_length;
				word = word.slice(0, len) + '......';
				return word;
			},
			// 点赞
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		margin: 0px;
		background-color: #f4f4f4;
		/* padding-bottom: 98rpx;
		padding-bottom: calc(98rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(98rpx + env(safe-area-inset-bottom)); */

		min-height: calc(100% - 98rpx);
		min-height: calc(100% - 98rpx - constant(safe-area-inset-bottom));
		min-height: calc(100% - 98rpx - env(safe-area-inset-bottom));

		overflow-x: hidden;
		position: relative;
	}

	.container-box {
		background: #FFFFFF;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.container-box .block_msg {
		background: #F5F5F5;
		height: 20rpx;
	}

	.tips-box {
		background: #FFFFFF;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
	}

	.info-icon {
		width: 56rpx;
		height: 56rpx;
		border-radius: 4rpx;
		margin-left: 7rpx;
	}

	.info-img {
		width: 100%;
		height: 100%;
	}

	.tips-text {
		margin: 0 auto;
	}

	.text {
		font-size: 26rpx;
		/* font-weight: bold; */
		color: rgba(255, 255, 255, 1);
		line-height: 60rpx;
	}

	.dynamic {
		padding: 30rpx 30rpx 0rpx 30rpx;
	}

	.info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.info-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.info-icon1 {
		width: 78rpx;
		height: 78rpx;
		border-radius: 4rpx;
	}

	.info-img1 {
		width: 100%;
		height: 100%;
	}

	.info-text {
		padding-left: 15rpx;
	}

	.name {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 44rpx;
	}

	.time {
		font-size: 24rpx;
		/* font-weight: 500; */
		color: rgba(51, 51, 51, 1);
		line-height: 44rpx;
		opacity: 0.3;
	}

	.category {
		/* width: 100%; */
		height: 44rpx;
		border: 2rpx solid rgba(6, 193, 174, 1);
		border-radius: 22rpx;
		font-size: 22rpx;
		/* font-weight: 500; */
		color: rgba(6, 193, 174, 1);
		line-height: 46rpx;
		text-align: center;
		padding: 0 15rpx;
	}

	.content {
		font-size: 32rpx;
		/* font-weight: 500; */
		color: rgba(51, 51, 51, 1);
		line-height: 44rpx;
		margin-top: 20rpx;
	}

	/* .content::after {
		content: "查看更多";
		font-size: 28rpx;
		font-weight: 500;
		color: #007AFF;
		line-height: 44rpx;
		margin-top: 40rpx;
	} */
	.img-box {
		width: 100%;
		margin-top: 10rpx;
	}

	.bigimg {
		width: auto;
		margin-top: 17rpx;
	}

	.bigimg_more {
		width: 32%;
		float: left;
		padding: 4rpx 4rpx 0;
		line-height: 1;
	}

	.around-img {
		height: 100%;
	}

	.around-img_more {
		width: 100%;
		height: 100%;
	}

	.read-box {
		clear: both;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 10rpx;
		align-items: flex-end;
	}

	.read-banner {
		display: flex;
		flex-direction: column;

	}

	.dingwei-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.dingwei-icon {
		width: 30rpx;
		height: 30rpx;
		margin-bottom: 5rpx;
	}

	.dingwei-img {
		width: 100%;
		height: 100%;
	}

	.read-address {
		/* transform: scale(0.8); */
		font-size: 24rpx;
		/* font-weight: 500; */
		/* color: rgba(153, 153, 153, 1); */
		color: #616879;
		line-height: 44rpx;
	}

	/* .read-address::before {
		content: "";
		width: 30rpx;
		height: 30rpx;
		background: url(../../../static/images/dingwei.png) no-repeat center;
		background-size: 30rpx;
		margin-left: 15rpx;
		margin-top: 15rpx;
	} */
	.read-text {
		font-size: 24rpx;
		/* font-weight: 500; */
		color: rgba(153, 153, 153, 1);
		line-height: 44rpx;
		margin-top: 4rpx;
	}

	.icon-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-bottom: 3px;
	}

	.dianzan,
	.dianzan1,
	.pinglun {
		width: 36rpx;
		height: 36rpx;
		margin-left: 30rpx;
	}

	.dianzan1 {
		margin-left: 0rpx;
	}

	.dianzan-icon,
	.dianzan-icon1,
	.pinglun-icon {
		width: 100%;
		height: 100%;
	}

	.cell {
		width: 700rpx;
		height: 1rpx;
		background: rgba(0, 0, 0, 1);
		opacity: 0.05;
		margin-top: 30rpx;
	}

	/* 点赞 */
	.dianzan-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 15rpx;
	}

	.info-box1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
		margin: 0rpx 15rpx;
	}

	.info-box1::before {
		content: "";
		width: 30rpx;
		height: 30rpx;
		background: url(../../../static/images/dianzan1.png) no-repeat center;
		background-size: 29rpx;
		margin-left: 15rpx;
	}

	.info-box2 {
		display: flex;
		flex-direction: row;
		margin-left: 15rpx;
	}

	.info-box2:first-child {
		margin-left: 15rpx;
	}

	.text-after {
		font-size: 20rpx;
		/* font-weight: 500; */
		color: rgba(128, 128, 128, 1);
		line-height: 44rpx;
		margin-left: 15rpx;
	}

	.info-icon2 {
		width: 41rpx;
		height: 41rpx;
	}

	.info-img2 {
		width: 100%;
		height: 100%;

	}

	.info-name {
		font-size: 20rpx;
		/* font-weight: 500; */
		color: #5F6E95;
		line-height: 44rpx;
		margin-left: 2rpx;
	}

	/* .info-name::after {
		content: ";";
	} */
	.comment-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 23rpx;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #F5F5F5;
		padding: 15rpx 0rpx;
	}

	.comment_more_box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 23rpx;
		margin: 0 30rpx;
		padding: 15rpx 0rpx 0rpx;
	}

	.comment_more_box .comment_more {
		width: 100%;
		font-size: 24rpx;
		text-align: center;
		color: #919191;
	}

	/* 评论 */
	.comment-icon {
		width: 65rpx;
		height: 65rpx;
		flex-shrink: 0;
	}

	.comment-img {
		width: 100%;
		height: 100%;
	}

	.comment-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: nowrap;
		margin-left: 15rpx;
	}

	.comment-info .reply_tip {
		color: #000000;
	}

	.comment-name {
		font-size: 24rpx;
		color: rgba(95, 110, 149, 1);
	}

	.comment-text {
		padding-top: 5rpx;
		display: flex;
		font-size: 24rpx;
		color: rgba(51, 51, 51, 1);
		flex-wrap: wrap;
	}

	.comment {
		overflow: hidden;
	}

	.conment-btn {
		width: 685rpx;
		height: 75rpx;
		background: #F5F6F9;
		border-radius: 10rpx;
		margin: 18rpx auto;
		font-size: 26rpx;
		/* font-weight:500; */
		color: rgba(153, 153, 153, 1);
		line-height: 75rpx;
		padding-left: 26rpx;
	}

	.publish {
		position: fixed;
		bottom: 250rpx;
		right: 12rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.publish-img {
		width: 100%;
		height: 100%;
	}

	.prpup-box {
		width: 100%;
		height: 200rpx;
	}

	.btn {
		float: right;
		height: 65rpx;
		background-color: #007AFF;
		line-height: 65rpx;
		color: #FFFFFF;
	}

	.tip {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #666;
		padding: 10px 0;
		background: #FFFFFF;
	}

	.no_data_tip {
		padding: 25% 20rpx;
		text-align: -webkit-center;
	}

	.no_tip_content {
		padding: 30rpx 18%;
		color: #919191;
		font-size: 24rpx;
	}


	.uni-popup__wrapper-box {
		overflow-y: visible !important;
	}

	.tui-tag-coupon-box {
		display: flex;
		align-items: center;
	}

	.tui-tag-coupon-box .tui-tag-class {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.tui-rate-container {
		display: flex;
		align-items: center;
	}

	.bottom-tips {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		margin: 0 30rpx;
	}
</style>
